<template>
	<div class="all">
		<div class="header">
			<div class="center">
				<ul>
					<li><img src="../assets/image/logo.png" alt="" width="100px" /></li>
					<li>
						<router-link to="/">首页<br />HOME</router-link>
					</li>
					<li>
						<router-link to="/test">测试<br />test</router-link>
					</li>
					<li>
						<router-link to="/main/cake">下午茶<br />SNACK</router-link>
					</li>
					<li>
						<router-link to="/main/business">企业专区<br />ENTERPRISE</router-link>
					</li>
					<li>
						<router-link to="/main/handbook">订阅<br />HOW TO ORDER</router-link>
					</li>
					<li style="margin-right: 24%">
						
						<router-link to="/groupChat">
							<div>文档</div>
							<div>word</div>
						</router-link>
						<!-- <a href="http://localhost:4000">
							<div>文档</div>
							<div>word</div>
						</a> -->
					</li>
					<li>
						<img src="../assets/image/wechatIcon.png" alt="" width="20px" />
					</li>
					<li>
						<img src="../assets\image\kefuIcon.png" alt="" width="20px" />&nbsp;&nbsp;&nbsp;&nbsp;<span
							style="color: brown">4008-557-667</span>
					</li>
					<li v-show="!user">
						<router-link to="/main/login">登录</router-link>
						/
						<router-link to="/main/register">注册</router-link>
					</li>
				</ul>
			</div>
		</div>
		<div class="carousel">
			<el-carousel height="644px">
				<el-carousel-item v-for="(item, index) in carousel" :key="index">
					<img :src="`/mp/${item.image}`" alt="" height="644px" width="100%" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- <video :src="item.playUrl" v-for="(item,index) in carousel" controls width="200px" height="200px" style="display: block;"></video> -->
		<!-- <video src="http://vd2.bdstatic.com/mda-na4crx46cnpmqtv8/cae_h264/1641373532575545576/mda-na4crx46cnpmqtv8.mp4" controls></video> -->
		<div class="icon">
			<div class="center">
				<router-link to="">
					<ul style="color: #444343">
						<li>
							<img src="../assets/image/cake.png" alt="" width="60px" />
							<h5>BLACK POOL CAKE</h5>
							<h5>黑池蛋糕</h5>
						</li>
						<li>
							<img src="../assets/image/ice_scream.png" alt="" width="60px" />
							<h5>AFTERNOON TEA</h5>
							<h5>下午茶</h5>
						</li>
						<li>
							<img src="../assets/image/salon.png" alt="" width="60px" />
							<h5>TASTE SALON</h5>
							<h5>赏味沙龙</h5>
						</li>
					</ul>
				</router-link>
			</div>
		</div>
		<div class="banner">
			<div style="text-align: center;
          margin-left: 40px;
          margin-top: 40px;
          margin-bottom: 40px;
          color: #684029;
        ">
				<h3>经 典 推 荐</h3>
				<h3 style="margin-top: 20px">BEST SELLER</h3>
			</div>
			<ul>
				<li v-for="(item, index) in data" :key="index">
					<router-link :to="`/main/cakexq?wid=${item.wid}`">
						<img :src="`/mp${item.image}`" alt="" width="205px" />
						<h4>{{item.chtitle}}</h4>
						<p>{{item.entitle}}</p>
						<div>
							<span style="color: #c27d15; font-weight: 800">{{item.price}}</span>
						</div>
					</router-link>
				</li>
			</ul>
			<button>
				<router-link to="">更多蛋糕 More+</router-link>
			</button>
		</div>
		<div class="footer">
			<div class="f_center">
				<ul>
					<li>
						<img src="../assets/image/kefuIcon.png" alt="" />
						<div>在线客服</div>
					</li>
					<li>
						<img src="../assets/image/wechatIcon.png" alt="" />
						<div>微信</div>
					</li>
					<li>
						<img src="../assets/image/sinaIcon.png" alt="" />
						<div>微博</div>
					</li>
				</ul>
				<h5 style="text-align: center; margin-top: 40px">
					客服时间 09:00-21:00；提前7小时预定 深圳大部分地区免费配送
				</h5>
				<ul>
					<li>关于我们</li>
					<li>联系我们</li>
					<li>订购指南</li>
					<li>生成许可证</li>
					<li>食品经营许可证</li>
					<li>
						<img src="../assets/image/govIcon.gif" alt="" />
					</li>
				</ul>
				<ul>
					<li>深圳市帕蒂希亚食品有限公司</li>
					<li>网站: www.blackpool.com.cn</li>
					<li>邮箱: allen@blackpool.com.cn</li>
					<li>订购热线: 4008 557 667</li>
				</ul>
				<hr style="margin-top: 20px" />
				<div style="text-align: center; margin-top: 20px; font-size: 12px">
					Copyright 2012,Patisserie Food Company Limited .All Right Reserved
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		getAppIndex
	} from "../api/test.js"

	export default {
		data() {
			return {
				data: [],
				carousel: [],
			};
		},
		computed: {
			...mapState(["user"]),
		},
		created() {
			this.getCakes();
			this.getCarousel();
			this.test()
		},
		methods: {
			test(){
				getAppIndex({
					page:0,
					size:10
				}).then(res=>{
					console.log("getAppIndex",res)
				})
			},
			getCakes() {
				let url = "/mp/index_cakes";
				this.axios
					.get(url)
					.then((res) => {
						console.log(res);
						this.data = res.data.data;
					})
					.catch((err) => {});
			},
			getCarousel() {
				let url = "/mp";
				this.axios
					.get(url)
					.then((res) => {
						// console.log(res);
						this.carousel = res.data.result.list;
						console.log("carousel", this.carousel);
					})
					.catch((err) => {});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.all {
		width: 100%;
	}

	* {
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
		color: #000;
	}

	.center {
		margin: auto;
		width: 1200px;
	}

	.header {
		padding: 30px;
		box-sizing: border-box;
		// position: fixed;
		// z-index: 100;
		// top: 0;
		background-color: white;
		width: 100%;
		// min-width:800px;
	}

	.carousel {
		margin-top: 30px;
	}

	.header a {
		text-decoration: none;
		color: #684029;
	}

	.header ul {
		list-style: none;
		display: flex;
		align-items: center;
		font-size: 14px;

		li {
			margin: 0 10px;
			text-align: center;
		}

		li:hover a {
			color: #a56224;
		}
	}

	.icon {
		ul {
			display: flex;
			justify-content: space-around;
			align-items: center;

			li {
				text-align: center;
				padding: 30px;
			}
		}
	}

	.banner {
		width: 53%;
		margin: auto;

		ul {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			text-align: center;

			li {
				p {
					font-size: 13px;
				}
			}
		}

		img {
			margin-bottom: 5px;
		}

		img:hover {
			transform: scale(1.1);
			transition: 1s;
		}

		a {
			color: #684029;
		}

		button {
			width: 100%;
			height: 84px;
			background: #f4f0ed;
			color: #684029;
			border-color: #68402942;
			margin-top: 40px;
		}
	}

	.footer {
		width: 100%;
		background-color: #f4f0ed;
		margin-top: 80px;

		.f_center {
			width: 45%;
			margin: auto;
			padding-top: 40px;
			text-align: center;
		}

		ul {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
		}

		ul:first-child {
			width: 50%;
			margin: auto;
		}

		ul:nth-child(3) {
			width: 55%;
			margin: auto;
			margin-top: 25px;
		}

		img {
			width: 24px;
		}
	}
</style>
